<template>
  <div class="page">
    <div class="q-m-md q-mb-md">
      <q-btn color="primary" label="添加用户" @click="showDialog" />
    </div>

    <div class="q-pa-md">
      <q-table
        :rows="data"
        :columns="columns"
        @request="fetchData"
        row-key="id"
      />
    </div>
    <CreateDialog
      v-if="showCreateDialog"
      @hide="hideDialog"
      @createUserSuccess="
        hideDialog()
        // fetchData();
      "
    />
  </div>
</template>

<script setup>
import { useUserSearch } from '../../composables/useUserSearch';
import CreateDialog from './CreateDialog.vue';
import { useToggleDialog } from '../../composables/useToggleDialog';
import { ref } from 'vue';

const columns = [
  {
    field: 'id',
    label: 'ID',
    align: 'center',
    style: 'width:50px'
  },
  {
    field: 'username',
    label: '用户名',
    align: 'center'
  },
  {
    field: 'nickname',
    label: '昵称',
    align: 'center'
  }
];

const showCreateDialog = ref(false);

const { hideDialog, showDialog } = useToggleDialog(showCreateDialog);
const { data, pagination, pagesNumber, fetchData } = useUserSearch();
</script>

<style scoped></style>
